<!-- 2023年4月9日 20点25分 动态  gpd  -->
<template>
	<view class="Trend">
		<!-- <view class="Trend_head" v-if="!this.token">
			<p @click="toLogin" style="font-size: 14px;font-weight: bold;text-align: center;margin-top: 30px;color: #31c27c;">请授权微信后再进行发布动态操作</p>
		</view> -->
		<view class="Trend_head" >
			<img :src='`{{avatarUrl}}`' alt="" style="border-radius: 6%;width: 50px;height: 50px;float: left;">
			<p style="float: left;font-weight: bold;font-size: 14px;margin-left: 8px;margin-top: 15px;">{{nickName}}</p>
			<!-- <u-button style="width: 90vw;height: 8vh;margin-left: 200rpx;margin-top: 6rpx;float: left;" @click="publish()" type="primary" color="linear-gradient(to right, rgb(254,132,0), rgb(254,87,0))" shape="circle" text="发布" ></u-button> 	 -->
			<button class="mini-btn" type="primary" size="mini" style="width:180rpx;margin-left: 360rpx;margin-top: 20rpx;float: left;" @click="publish()">发布</button>
		</view>
			<!-- 动态评论 有视频和图片的-->
			<view class="Trend_body" v-for="item in userTrendList" :key="item.id">
				<view class="Trend_top">
					<img :src='item.avatarUrl' alt="" style="border-radius: 50%;width: 40px;height: 40px;float: left;">
					<p style="margin-top:4px;margin-left:10px;font-weight: bold;font-size: 14px;float: left;">{{item.userName}}</p>
					<p style="font-size: 12px;#B1B1B1;margin-left:10px;float: left;width: 80%;">{{item.createTime}}</p>
				</view>
				<!-- 动态评论内容 -->
				<view class="Trend_content1">
					<p style="font-size: 12px;">{{item.content}}</p>
				</view>
				<!-- 动态评论视频和图片 -->
				<view class="Trend_image" v-if="item.videoGroup =='' && item.pictureGroup !==''">
					<img @click="clickImg(it,index)" v-for="(it,index) in item.pictureGroup" :key="index"  :src='`http://101.43.223.224:8765/image/getImageById?id=${it-0}`' alt="" style="width:80px;height: 80px;margin-left: 4px;">
				</view>
				<view class="Trend_image" v-if="item.videoGroup!=='' && item.pictureGroup ==''">
					<video @click="playVedio(item.videoGroup)"  @fullscreenchange="fullscreenchange"   :id="item.videoGroup" v-if="item.videoGroup"  :src='`http://101.43.223.224:8765/image/getVideoById?id=${item.videoGroup-0}`' style="width:80px;height: 80px;margin-left:4px;" autoplay loop muted preload="auto" width="100%" height="100%"></video>
				</view>
				<view class="Trend_image" v-if="item.videoGroup!=='' && item.pictureGroup !==''">
					<video @fullscreenchange="fullscreenchange" @click="playVedio(item.videoGroup)"  :id="item.videoGroup" v-if="item.videoGroup"  :src='`http://101.43.223.224:8765/image/getVideoById?id=${item.videoGroup-0}`' style="width:80px;height: 80px;margin-left:4px;" autoplay loop muted preload="auto" width="100%" height="100%"></video>
					<img @click="clickImg(it,index)" v-for="(it,index) in item.pictureGroup" :key="index"  :src='`http://101.43.223.224:8765/image/getImageById?id=${it-0}`' alt="" style="width:80px;height: 80px;margin-left: 4px;">
				</view>
				<view class="Trend_reply_botton">
					<view style="width:20px;float: left;margin-top: 12px;margin-bottom:10px;margin-left: 200px;">
						<u-icon v-if="item.thumbFlag == 0" @click="ThumbsUpState(item)"  name="thumb-up" size="20" ></u-icon>
						<u-icon v-if="item.thumbFlag == 1" @click="getTrendThumbByUserIdAndTrendId(item)" name="thumb-up-fill" size="20" style="width:20px;float: left;margin-top: 12px;margin-bottom:10px;margin-left: 200px;"></u-icon>
					</view>
					<span style="font-size: 14px;float: left;margin-top: 12px;">{{item.likes}}</span>
					<span style="margin-left: 30px;font-size: 14px;margin-top: 10px;float: left;" @click="clickReply(item)">回复</span>
					<span v-if="item.userId==userId" style="margin-left: 10px;font-size: 14px;margin-top: 10px;float: left;" @click="deleteTrendById(item)">删除</span>
				</view>
				<!-- 查看评论按钮 -->	
				<view class="Thrend_see">
					<p class="Thrend_seeP" v-if="item.childs.length!==0"  @click="seeComment(item)">查看评论</p>
				</view>
				<!-- 一级动态回复框 -->
				<view class="Trend_reply" v-if="item.id == trendId">
					<u--textarea v-model="firstTrendContent" placeholder="请输入内容" count style="width:320px;height: 40px;"></u--textarea>
					<button type="primary" @click="saveFirstTrend()" size="mini" style="width:100px;height: 30px;margin-top: 10px;margin-left:30%;float: left;">发表评论</button>
					<button @click="cancelReply()" type="default" size="mini" style="width:100px;height: 30px;margin-top: 10px;margin-left:3%;float: left;">取消评论</button>
				</view>
				
				<!-- 查看评论 -->
				<view style="position: relative;">
					<view class="" v-for="(childs,index) in item.childs" :key="index">
						<view class="Trend_check" v-if="childs.parentId === seeCommentId">
							<view class="Trend_top">
								<img :src='childs.avatarUrl' alt="" style="border-radius: 50%;width: 40px;height: 40px;float: left;">
								<p style="margin-top:4px;margin-left:10px;font-weight: bold;font-size: 14px;float: left;">{{childs.userName}}</p>
								<p style="font-size: 12px;#B1B1B1;margin-left:10px;float: left;width: 80%;">{{childs.createTime}}</p>
							</view>
							<!-- 动态评论内容 -->
							<view class="Trend_content1">
								<p style="font-size: 12px;">{{childs.content}}</p>
							</view>
							<!-- 动态回复的评论 -->
							<view class="Trend_ReplyContent" v-if="childs.replyName !== null">
								 <p class="Trend_replyContentP">--{{childs.replyName}}：<span class="Trend_replyContentSpan">{{childs.replyContent}}</span></p>
							</view>
							<view class="Trend_reply_botton">
								<view style="width:20px;float: left;margin-top: 12px;margin-bottom:10px;margin-left: 60%;">
									<u-icon v-if="childs.thumbFlag == 0" @click="ThumbsUpState(childs)" name="thumb-up" size="20" ></u-icon>
									<u-icon v-if ="childs.thumbFlag == 1" @click="getTrendThumbByUserIdAndTrendId(childs)" name="thumb-up-fill" size="20" style="width:20px;float: left;margin-top: 12px;margin-bottom:10px;margin-left: 200px;"></u-icon>
								</view>
								<span style="font-size: 14px;float: left;margin-top: 12px;">{{childs.likes}}</span>
								<span style="margin-left: 8%;font-size: 14px;margin-top: 10px;float: left;" @click="secondReplyBox(childs)">回复</span>
								<span  v-if="item.userId==userId" style="margin-left: 2%;font-size: 14px;margin-top: 10px;float: left;" @click="deleteSecondTrendById(childs)">删除</span>
							</view>
							
							<!-- 二级动态回复框 -->
							<view class="Trend_reply" v-if="childs.id == secondCommentId">
								<u--textarea v-model="secondTrendContent" placeholder="请输入内容" count style="width:100%;height: 40px;"></u--textarea>
								<button size="mini" type="primary" @click="saveSecondTrend()" text="" style="width:100px;height: 30px;margin-top: 10px;margin-left:30%;float: left;">发表评论</button>
								<button size="mini" @click="cancelSecondReplyBox()" type="default" text="" style="width:100px;height: 30px;margin-top: 10px;margin-left:3%;float: left;">取消评论</button>
							</view>
							
						</view>
						
					</view>
					<view class="Thrend_stow" v-if="item.id === stowCommentId">
						<p class="Thrend_stowP" @click="stowSecondLevelComment()">收起</p>
					</view>
				</view>
				
				
			</view>
			<!-- 动态评论 没有视频和图片的-->
			<!-- <view class="Trend_body1">
				<view class="Trend_top">
					<img src="/static/order_status/箱子.png" alt="" style="border-radius: 50%;width: 40px;height: 40px;float: left;">
					<p style="margin-top:4px;margin-left:10px;font-weight: bold;font-size: 14px;float: left;">张三</p>
					<p style="font-size: 12px;#B1B1B1;margin-left:10px;float: left;width: 280px;">2023-04-10 07：12：11</p>
				</view>
				<view class="Trend_content">
					<p style="font-size: 12px;">今天真是美好的一天</p>
					<u-icon name="thumb-up" size="20" style="width:20px;float: left;margin-top: 2px;"></u-icon><span style="font-size: 14px;">20</span>
					<span style="margin-left: 30px;font-size: 14px;">回复</span>
					<span style="margin-left: 10px;font-size: 14px;">删除</span>
				</view>
			</view> -->
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 有视频和图片的动态回复框值
				reply:'',
				// 有视频和图片的动态回复框默认false
				replyShow:false,
				// 所有用户发布的动态数组
				userTrendList:'',
				// 一级动态评论
				trendId:'',
				// 一级动态评论id
				parentIdFirst:'',
				// 一级动态评论回复框内容
				firstTrendContent:'',
				// 收起评论id
				stowCommentId:0,
				// 二级回复评论
				secondCommentId:0,
				// 查看评论id
				seeCommentId: 0,
				 // 二级被回复人id
				repyIdSecond:'',
				// 二级被回复人名字
				replyNameSecond:'',
				// 二级父级id
				parentIdSecond:'',
				// 二级被回复内容
				replyContentSecond:'',
				// 二级回复框内容
				secondTrendContent:'',
				// 中间表点赞数组
				trendTrub:'',
				// 中间表点赞数id
				trendTrubId:'',
				// 点击播放视频时存入视频id
				videoindex:'',
				// 存放登录成功后的结果
				user:'',
				// 存放登录成功后的用户id
				userId:'',
				// 存放登录成功后的用户昵称
				nickName:'',
				// 存放登录成功后的图片路径和id
				avatarUrl:'',
				// 存放登录成功后的token
				token:'',
			}
		},
		methods:{
			
			// 点击图片方法
			clickImg(it,index) {
				uni.previewImage({
					//需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					urls:  [`http://101.43.223.224:8765/image/getImageById?id=${it}`], 
					// 当前显示图片的http链接，默认是第一个
					current:index, 
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// 点击播放视频方法
			playVedio(videoGroup) {
				this.videoindex = videoGroup
				uni.createVideoContext(videoGroup).requestFullScreen();
				uni.createVideoContext(videoGroup).play()
			},
			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext(`${this.videoindex}`).pause()
				} 
			},
			// 跳转发布动态页面
			publish(){
				uni.navigateTo({
					url:'/pages/trend/AddTrend'
				})
			},
			// 点击有视频图片的动态回复时
			clickReply(item){
				this.trendId = item.id
				this.parentIdFirst = item.id
			},
			// 点击有视频图片的动态回复的取消评论时
			cancelReply(){
				this.trendId = 0
			},
			// 初始化查询用户发布的动态信息
			getUserTrend(){
				this.$myRequest({
					url:"/trends/getUserTrend",
					data:{
						userId:this.userId
					}
				}).then(res=>{
					this.userTrendList = res.data.data
					this.userTrendList.forEach(item=>{
						if(item.pictureGroup!='')
							item.pictureGroup  = item.pictureGroup.split(',')
					})
				})
			},
			// 添加一级动态评论
			saveFirstTrend(){
				this.$myRequest({
					url:"/trends/saveFirstTrend",
					method:"POST",
					dataType:'json',
					data:{
						userId:this.userId,
						avatarUrl:this.avatarUrl,
						userName:this.nickName,
						content:this.firstTrendContent,
						parentId:this.parentIdFirst,
					}
				}).then(res=>{
					uni.showToast({
						title: '发布成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 查询所有的动态评论 （刷新刚发布消息）
					this.getUserTrend()
					this.trendId=0
					this.parentIdFirst=''
					this.firstTrendContent=''
				})
			},
			//查看评论
			seeComment(item){
				this.stowCommentId = item.id
				this.seeCommentId = item.id
			},
			// 收起二级评论
			stowSecondLevelComment(){
				this.seeCommentId = 0
				this.stowCommentId = 0
			},
			// 点击二级回复评论
			secondReplyBox(childs){
				this.parentIdSecond = childs.parentId
				this.repyIdSecond = childs.userId
				this.replyNameSecond = childs.userName
				this.replyContentSecond = childs.content
				this.secondCommentId = childs.id
			},
			// 二级回复评论取消
			cancelSecondReplyBox(){
				this.secondCommentId = 0
			},
			// 新增二级动态评论
			saveSecondTrend(){
				this.$myRequest({
					url:"/trends/saveSecondTrend",
					data:{
						userId:this.userId,
						userName:this.nickName,
						avatarUrl:this.avatarUrl,
						content:this.secondTrendContent,
						parentId:this.parentIdSecond,
						replyId:this.parentIdSecond,
						replyName:this.replyNameSecond,
						replyContent:this.replyContentSecond
					},
					method:"POST",
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '发布成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					this.secondCommentId = 0
					this.secondTrendContent = ''
					// 刷新
					this.getUserTrend()
				})
			},
			// 根据用户id和动态id查询点赞表id
			getTrendThumbByUserIdAndTrendId(childs){
				this.$myRequest({
					url:'/trends/getTrendThumbByUserIdAndTrendId',
					data:{
						tId:childs.id,
						uId:1
					}
				}).then(res=>{
					this.trendTrub = res.data.data
					this.trendTrubId = res.data.data[0].id
					// 取消点赞
					this.noThumbsUpState()
				})
			},
			// 用户点赞
			ThumbsUpState(childs){
				this.$myRequest({
					url:'/trends/thumbsUpState',
					data:{
						userId:this.userId,
						trendId:childs.id
					},
					method:"POST",
					dataType:'json'
				}).then(res=>{
					uni.showToast({
						title: '点赞成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新
					this.getUserTrend()
				})
			},
			// 取消点赞
			noThumbsUpState(){
				this.$myRequest({
					url:'/trends/noThumbsUpState',
					method: 'delete',
					data: JSON.stringify(this.trendTrubId)
				}).then(res=>{
					uni.showToast({
						title: '取消点赞成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					// 刷新
					this.getUserTrend()
				})
			},
			
			// 删除一级评论
			deleteTrendById(item){
				this.$myRequest({
					url:'/trends/deleteTrendById',
					data: JSON.stringify(item.id),
					method: 'delete'
				}).then(res=>{
					if(res.data.code == 200){
						uni.showToast({
							title: '删除评论成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						// 刷新
						this.getUserTrend()
					}
				})
			
			},
			
			// 删除二级评论
			deleteSecondTrendById(childs){
				this.$myRequest({
					url:'/trends/deleteTrendById',
					data: JSON.stringify(childs.id),
					method: 'delete'
				}).then(res=>{
					if(res.data.code == 200){
						uni.showToast({
							title: '删除评论成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						// 刷新
						this.getUserTrend()
					}
				})
			},
			
			// 跳转登录授权界面
			// toLogin(){
			// 	uni.navigateTo({
			// 		url:"/pages/login/Login"
			// 	})
			// }
		},
		onLoad() {
			this.user = wx.getStorageSync("user")
			this.token = wx.getStorageSync("token")
			this.userId = this.user.id
			this.nickName = this.user.nickName
			this.avatarUrl = this.user.avatarUrl
			// 初始化查询用户发布的动态信息
			this.getUserTrend()
		},
		onShow(){
			// 初始化查询用户发布的动态信息
			this.getUserTrend()
		},
	}
</script>

<style>
	.Trend{
		width: 100%;
		overflow: hidden;
	}
	::v-deep.Trend_button{
		width: 80rpx;
		margin-left: 200rpx;
		margin-top: 6rpx;
		float: left;
	}
	.Trend_head{
		margin-top: 10px;
		width: 100%;
		height: 50px;
	}
	.Trend_body{
		background-color: #f9f9f9;
		width: 92%;
		margin-top: 20px;
		margin-left: 30px;
		border-bottom: 2px solid #F0F0F0;
		overflow: hidden;
	}
	.Trend_body1{
		width: 92%;
		margin-top: 30px;
		margin-left: 30px;
		border-bottom: 2px solid #F0F0F0;
		overflow: hidden;
	}
	.Trend_top{
		width: 98%;
		height: 40px;
	}
	.Trend_content{
		width: 76%;
		height: 40px;
		margin-top: 10px;
		margin-left: 50px;
		margin-bottom:10px;
	}
	.Trend_content1{
		width: 76%;
		height: 20px;
		margin-top: 10px;
		margin-left: 50px;
	}
	.Trend_image{
		width: 92%;
		height:80px;
		margin-top: 10px;
	}
	.Trend_reply{
		width: 100%;
		height: 100px;
		margin-top: 40px;
		margin-bottom: 10px;
	}
	.Thrend_see{
		width: 92%;
		height: 30px;
		
	}
	.Thrend_seeP{
		width:32%;
	}
	.Trend_reply_botton{
		width: 96%;
		height: 20px;
		margin-bottom: 10px;
	}
	.Trend_check{
		margin-top: 6%;
		width: 92%;
		height: 150px;
		background-color: #FAFAFA;
	}
	.Thrend_stow{
		width: 100%;
		height: 50px;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.Thrend_stowP{
		width: 60px;
		margin-left: 300px;
	}
	.Trend_ReplyContent{
		width: 92%;
		height: 20px;
	}
	.Trend_replyContentP{
		color: #31c27c;
		font-size: 14px;
		line-height: 1.6;
	}
	.Trend_replyContentSpan{
		color: #000;
		font-size: 14px;
		line-height: 1.6;
	}
</style>